import { PropsWithChildren } from 'react';
import { useEffect, FC, useState } from 'react';
import { TabTypeEnum, tabArr, TabTypeUnion } from './config/defaultParam'
import { View, Text, Icon, Input, Image } from '@tarojs/components'
import { Swiper, SwiperItem } from '@tarojs/components'
import { AtSwitch } from 'taro-ui'
import './index.less'
import MyG63 from '@resource/tabImg/myG63.png'
import LeeYuanAudia8 from '@resource/tabImg/leeYuanAudia8.png'
import LeeWeiAudia8 from '@resource/tabImg/LeeWeiAudia8.png'
import { DirectBook, WiningQuery, ManufacturerSubsidy, TreasureBook, AnswerQuestion, Subscrible } from './components'
import { useDispatch, useSelector } from 'react-redux';
import Taro from '@tarojs/taro';
import TreasureBookimg from '@resource/tabImg/treasureBook.svg'
import ADragon from '@resource/tabImg/aDragon.svg'
import AnwserMe from '@resource/tabImg/anwserMe.svg'
import Subscribed from '@resource/tabImg/subscribed.svg'
import { formatDate } from '@untils/common.ts'
import { useSetState } from '@hooks/index.ts'

enum BlockEnum {
  alone = 'alone',
  treasureBook = 'treasureBook',
  answer = 'answer',
  subscrible = 'subscrible'
}
export type BlockTypeUnion = keyof typeof BlockEnum;

const blockList = [
  { type: 'alone', text: '葫芦娃一条龙', url: ADragon },
  { type: 'treasureBook', text: '葫芦娃宝典', url: TreasureBookimg },
  { type: 'answer', text: '葫芦娃答疑', url: AnwserMe },
  { type: 'subscrible', text: '葫芦娃订阅', url: Subscribed },
]

const Index: FC<PropsWithChildren> = () => {
  // dispatch({ type: 'count/add', payload: 1 });
  const dispatch = useDispatch();
  const { count } = useSelector((store: any) => {
    return store.counter;
  });

  const { reserve, query, subsidy } = TabTypeEnum
  const { alone, treasureBook, answer, subscrible } = BlockEnum
  const [queryType, setQueryType] = useState<TabTypeEnum>(reserve)
  const [chooseBlock, setChooseBlock] = useState<BlockTypeUnion>(alone)
  const [subState, setSubState] = useSetState({
    reserve_remind: false,
    winning_reming: false
  })

  useEffect(() => {
    // 任何你需要在组件挂载时执行的副作用
  }, []);

  const changeQueryType = (type: string) => {
    setQueryType(type as TabTypeEnum);
  }

  const renderBodyPage = (type: TabTypeUnion) => {
    if (type === reserve) {
      return <DirectBook />
    } else if (type === query) {
      return <WiningQuery />
    } else {
      return <ManufacturerSubsidy />
    }
  }

  const subHandleChange = (value: boolean, type: string) => {
    setSubState({ [type]: value })
  }
  return (
    <View className="container">
      <View className='main'>
        <View className='mainBlock'>
          {
            blockList.map(item => {
              const { type, text, url } = item
              return <View className={`block ${chooseBlock == type && 'bechecked'}`}
                onClick={() => setChooseBlock(type as BlockTypeUnion)}>
                <Image className='left-content' src={url} mode='aspectFill' />
                <Text className='title'>{text}</Text>
              </View>
            })
          }
        </View>
      </View>
      {
        chooseBlock === alone &&
        <View className='alone'>
          <View className='fixBox'>
            {/* <View className='mySwiper'>
                  <Swiper
                    className='test-h'
                    indicatorColor='#999'
                    indicatorActiveColor='#333'
                    vertical={false}
                    circular
                    indicatorDots
                    autoplay={true}
                  >
                    <SwiperItem>
                      <Image className='left-content' src={MyG63} mode='aspectFill' />
                    </SwiperItem>
                    <SwiperItem>
                      <Image className='left-content' src={LeeYuanAudia8} mode='aspectFill' />
                    </SwiperItem>
                    <SwiperItem>
                      <Image className='left-content' src={LeeWeiAudia8} mode='aspectFill' />
                    </SwiperItem>
                  </Swiper>
              </View> */}
            <View className='reserve-result'>
              <View className='our-notice'>小海鸥告示</View>
              <View className='total date'>
                <Text className='total-date text'>当前({formatDate()})：</Text>
                <Text className='total-date number'>无可预约平台，敬请期待！</Text>
              </View>
              <View className='total platform'>
                <Text className='total-platform text'>当前可预约平台总数：</Text>
                <Text className='total-platform number'>0个</Text>
              </View>
              <View className='total quota'>
                <Text className='total-quota text'>当前可预约平台总放量数：</Text>
                <Text className='total-quota number'>10000个</Text>
              </View>
              <View className='sub-box'>
                {
                  queryType === reserve && <AtSwitch color='#fbd002' title='葫芦娃开门提醒订阅' checked={subState.reserve_remind} onChange={(value) => subHandleChange(value, 'reserve_remind')} />
                }
                {
                  queryType === query && <AtSwitch color='#fbd002' title='葫芦娃中签提醒订阅' checked={subState.winning_reming} onChange={(value) => subHandleChange(value, 'winning_reming')} />
                }
              </View>
            </View>
            <View className="header">
              {tabArr.map((item, index) => {
                const { title, type } = item
                return <View key={index} className={`${queryType == type ? 'checked' : type}`} onClick={() => changeQueryType(type)}>{title}</View>
              })}
            </View>
          </View>
          {renderBodyPage?.(queryType)}
        </View>
      }
      {chooseBlock === treasureBook && <TreasureBook />}
      {chooseBlock === answer && <AnswerQuestion />}
      {chooseBlock === subscrible && <Subscrible />}
    </View>
  );
};

export default Index;
